import React,{useState,useEffect} from 'react'
import { Card,Button,Spin } from 'antd';
import { UndoOutlined } from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react'

export default function VisitCard(props) {

  const {data,months,chooseDate}=props
  const [loading, setLoading] = useState(false)
  const [showData, setShowData] = useState(false)

  const update=()=>{
    setLoading(true)
    setTimeout(()=>{
      setLoading(false)
    },1000)
  }

  const option={
    xAxis: {
      type: 'category',
      data: showData.months,
    },
    yAxis: {
      type: 'value',
      axisLabel:{
        formatter:num=>{
          return num>10000?(num/10000).toFixed(0)+'万':num
        }
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    series: [{
      data: showData.data,
      type: 'bar',
    }]

  }

  const extra=<Button type='link' onClick={()=>update()}><UndoOutlined /></Button>

  useEffect(() => {
    if(chooseDate.length!==0){
      setShowData(chooseDate.reduce((p,c)=>{
        p.months.push(c.name)
        p.data.push(c.data[3].data.reduce((p,c)=>p+c))
        return p
      },{months:[],data:[]}))
    }else{
      setShowData({months,data})
    }
    
  }, [data,chooseDate,months]);

  return (
    <div className='home-visit-card'>
      <Card title='访问趋势' extra={extra}>
        <Spin spinning={loading}>
          <ReactEcharts option={option}></ReactEcharts>
        </Spin>
      </Card>
    </div>
    
  )
}
